.vipH5 {
  @apply w-screen h-screen fixed top-0 bg-bg overflow-y-auto;
  padding-bottom: 12.5rem;
  z-index: var(--pop-index);
  animation: alls 0.3s ease;

  .vipBg {
    @apply w-full absolute left-0 top-0;
    z-index: -1;
  }

  .title {
    @apply fixed left-0 top-0 flex items-center justify-between w-full px-4 z-10;
    height: 4rem;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);

    & > img {
      height: 1.375rem;
      width: 1.375rem;

      &:nth-child(1) {
        transform: rotate(90deg);
      }
    }
  }

  .itemMeal {
    @apply relative;
    width: calc(100vw - 2rem);
    height: 6.75rem;
    background-size: 100% 100%;
    margin: 0 auto 0.875rem;

    &.normal {
      background-image: url('/images/meal-h5-bg1.webp');
    }

    &.active {
      background-image: url('/images/meal-h5-bg2.webp');
    }

    .cornerMark {
      @apply absolute px-2 py-1 inline-block rounded font-bold text-xs italic;
      left: 0.375rem;
      top: 0.375rem;
      color: #503131;
      background: linear-gradient(251deg, #ffb9a7 0%, #ffe2b7 100%);
      font-family: REEJI-HonghuangLiGB;
    }

    .info {
      @apply w-full h-full flex justify-between items-center pl-10;

      .infoDate {
        .desc {
          @apply font-bold text-white text-xl leading-5;
        }

        .discountMark {
          @apply text-xs leading-3 text-white mt-2 whitespace-nowrap;
          font-feature-settings: 'kern' on;
          font-family: Alibaba PuHuiTi 2;
        }
      }

      .price {
        @apply font-bold w-fit mb-5 pr-10 absolute right-0 top-4 whitespace-nowrap;
        color: #7c3c19;
        margin-top: 0.625rem;
        width: 7.5rem;

        .span1 {
          @apply text-base font-extrabold leading-5;
          margin-right: 0.375rem;
          color: #ffbd8d;
        }

        .span2 {
          @apply font-bold leading-10;
          font-size: 1.875rem;
          font-feature-settings: 'kern' on;
          font-feature-settings: 'kern' on;
          background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
        }

        .popular {
          @apply text-xs inline-block text-white absolute font-bold;
          padding: 0.1875rem 0.375rem;
          right: 0.625rem;
          top: -1.25rem;
          background: linear-gradient(90deg, #ff6a00 4%, #ff5543 96%);
          border-radius: 0.625rem;
          border-bottom-left-radius: 0;
          font-family: PingFang SC;
        }
      }
    }
  }

  .vipChoose {
    @apply flex h-4 px-4;

    & > img {
      @apply w-4 h-4;
      margin-right: 0.625rem;
    }

    & > span {
      @apply text-base leading-4 text-white;
      font-family: PingFang SC;
      text-transform: capitalize;
    }
  }

  .vipPayWay {
    @apply flex mt-5 mb-5 flex-wrap ml-4;
    width: calc(100vw - 2rem);

    .payWayItem {
      @apply rounded flex items-center cursor-pointer mb-2;
      padding-left: 0.9375rem;
      width: calc(calc(100% - 1.25rem) / 3);
      height: 3.125rem;
      background: #242424;

      &:not(:first-child) {
        @apply ml-2;
      }

      &:nth-child(3n + 1) {
        @apply ml-0;
      }

      &.active {
        background: linear-gradient(90deg, rgba(254, 237, 128, 0.14) 0%, rgba(255, 142, 0, 0.14) 100%);
        border: 2px solid #ffbd8d;
      }

      & > img {
        @apply h-5 w-5;
        margin-right: 0.625rem;
      }

      & > span {
        @apply text-xs text-white leading-3;
        font-family: Alibaba PuHuiTi 2;
        font-variation-settings: 'opsz' auto;
      }
    }
  }

  .vipQuanxian {
    @apply flex mt-5;
    padding-bottom: 2.5rem;

    .quanxianItem {
      @apply h-full flex flex-col justify-center items-center;
      width: 20.9375rem;

      .iconBox {
        @apply flex items-center justify-center;
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 0.625rem;
        background: #242424;

        & > img {
          @apply object-contain;
          width: 2.5rem;
          height: 2.5rem;
        }
      }

      .vtitle {
        @apply mb-5 text-xs;
        font-family: Alibaba PuHuiTi 2;
        margin-top: 0.625rem;
        background: linear-gradient(90deg, #ffd6cb 0%, #ffe5d8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }
    }
  }

  .pay {
    @apply fixed left-4;
    bottom: 2.125rem;
    width: calc(100vw - 2rem);
    height: 3.125rem;
    border-radius: 3.125rem;
    background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
  }
}

@keyframes alls {
  0% {
    left: 100vw;
  }

  100% {
    left: 0;
  }
}
